<template>
  <div class="add" ref="add">
    <header-text></header-text>
    <div class="adduser">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="菜单标题" prop="name">
          <el-col :span="10">
            <el-input v-model="ruleForm.name" placeholder="请输入菜单标题"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-col :span="10" style="display:flex; align-items: center;">
            <el-input v-model="ruleForm.icon" placeholder="请选择一下图标" disabled></el-input>
            <i :class="ruleForm.icon" class="icon"></i>
          </el-col>
          <div class="grid">
            <div
              v-for="item of elementIcons"
              :key="item"
              @click="handleClipboard(generateElementIconCode(item),$event)"
            >
              <el-tooltip placement="top">
                <div slot="content">{{ generateElementIconCode(item) }}</div>
                <div class="icon-item">
                  <i :class="'el-icon-' + item" />
                  <span>{{ item }}</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import HeaderText from "../../components/from/HeaderText";
import elementIcons from "../../../utils/AddMenu";
// import clipboard from "../../utils/clipboard";
export default {
  data() {
    return {
      elementIcons,
      ruleForm: {
        name: "",
        icon: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入一个菜单名称", trigger: "change" }
        ]
      }
    };
  },
  components: {
    HeaderText
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          this.$api
            .roleAdminAdd({
              role_name: this.ruleForm.name,
              rules: this.$refs.tree.getCheckedKeys(),
              token: this.publick.token()
            })
            .then(res => {
              this.$message({
                type: "success",
                message: res.message
              });
              //成功后刷新数据
              this.menuAdminList();
              this.roleAdminOption();
            })
            .catch(res => {
              console.log(res);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClipboard(text) {
      this.ruleForm.icon = text.split('"')[1];
    },
    generateElementIconCode(symbol) {
      return `<i class="el-icon-${symbol}" />`;
    }
  }
};
</script>

<style scoped>
.add {
  width: 100%;
  height: 89vh;
  overflow: auto;
  background: #eff2f7;
}
.adduser {
  width: 100%;
  /* height: 82.1vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5vh;
}
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;
}
.grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.icon-item {
  margin: 20px;
  height: 85px;
  text-align: center;
  width: 100px;
  float: left;
  font-size: 30px;
  color: #24292e;
  cursor: pointer;
}

span {
  display: block;
  font-size: 12px;
  margin-top: 10px;
}

.disabled {
  pointer-events: none;
}
.icon{
  display: block;
  font-size: 25px;
  margin-left: 3%;
}
</style>
